import React, { useState, useEffect, PureComponent } from 'react'
import '@/assets/OrderConfirm/index.less'
import { history, withRouter } from 'umi';
import { countDown } from '@/utils/time'
import { orderInfo, payOrder } from '@/api'
import { Toast } from 'antd-mobile'
import wxJs from '@/utils/weChat'

class OrderConfirm extends PureComponent {
  state = {
    time: {
      hour: 0,
      minute: 0,
      second: 0
    }
  }

  componentDidMount() {
    const { query: { order_id } } = (this.props as any).history.location
    // console.log('history:', history)
    orderInfo({ order_id }).then((res: any) => {
      console.log('订单信息', res)
      if (res.code === 1) {
        Toast.success(res.msg, 1)
        const { expire_time } = res.data
        countDown(expire_time, ({ hour, minute, second }: { hour: any, minute: any, second: any }) => {
          // console.log('hour:', hour, 'minute:', minute, 'second:', second)
          // setTime({ hour, minute, second })
          this.setState({
            time: { hour, minute, second }
          })
        })
      } else {
        Toast.fail(res.msg, 1)
      }
    })
  }

  render() {
    const { time } = this.state;
    return (
        <div className='sure_order'>
        <div className='sure_order_background'>
          <div className='font'><img src={require('@/assets/background_time.jpg')} alt="" /><b>等待付款</b></div>
          <div className='time'>
            <p>需付款：¥ {'总价'}.00 剩余时间：<span id="time" >
              {time.hour}时{time.minute}分{time.second}秒
              </span></p>
          </div>
        </div>
        <div className='sure_order_main'>
          <div className='sure_order_main_fonts'>
            <p>使用权归属：ABCD省的口舌快递费就开始</p>    {/*此地方的数据如果调用接口直接赋值就可以 */}
            <p>使用权时间：自购买一年内</p>
          </div>
          <div className='sure_order_main_btns'>
            <button className='sure_order_main_btn_left' onClick={() => {
              // alert('已准备好调用接口')
            }}>取消支付</button>
            <button className='sure_order_main_btn_right' onClick={() => {
              // 调用支付接口
              const { query: { order_id } } = (this.props as any).history.location
              // 支付下单接口
              payOrder({order_id}).then(res => {
                (wxJs as any).jsApiCall(res).then((result: any) => {
                  console.log('result:', result)
                })
              })
            }}>去支付</button>
          </div>
        </div>
      </div>
    ) 
  }
}

export default OrderConfirm;

// function OrderConfirm(props: any) {
//   const [time, setTime] = useState<any>({hour: 0, minute: 0, second: 0})

//   useEffect(() => {
//     const { query: { order_id } } = history.location
//     console.log('history:', history)
  
//     orderInfo({ order_id }).then((res: any) => {
//       // console.log('订单信息', res)
//       const { expire_time } = res.data
//       countDown(expire_time, ({ hour, minute, second }: { hour: any, minute: any, second: any }) => {
//         // console.log('hour:', hour, 'minute:', minute, 'second:', second)
//         setTime({ hour, minute, second })
//       })
//     })
//   }, [])

  //   // 微信支付
  // const jsApiCall = (payJson: any) => {
  //     console.log("payJson:", payJson);
  //     WeixinJSBridge.invoke(
  //       'getBrandWCPayRequest', {
  //       appId: payJson.appId,
  //       nonceStr: payJson.nonceStr,
  //       package: payJson.package,
  //       signType: payJson.signType,
  //       timeStamp: payJson.timeStamp,
  //       paySign: payJson.paySign,
  //     },
  //       (res: any) => {
  //         console.log('支付页面：', res)
  //         if (res.err_msg === 'get_brand_wcpay_request:ok') {
  //           // eslint-disable-next-line no-undef
  //           WeixinJSBridge.log(res.err_msg);
  //           // if (orderType === 1) {
  //           //   window.location.href = `/cicp/platform/buy/regimentType?orderSn=${orderInfo.regiment_sn}&orderType=${orderType}`
  //           // } else if (orderType === 2) {
  //           //   window.location.href = `/cicp/platform/buy/regimentType?goodId=${goodId}&orderType=${orderType}`
  //           // }
  //         } else {
  //           // this.Message.show({
  //           //   msg: '支付失败',
  //           //   clickClose: true, // 点击蒙层可关闭
  //           //   btn: ['确认'],
  //           //   onConfirm: () => {
  //           //     // window.history.go(-1)
  //           //   },
  //           // })
  //         }
  //       },
  //     )
  //   }

//   return (
//     <div className='sure_order'>
//       <div className='sure_order_background'>
//         <div className='font'><img src={require('@/assets/background_time.jpg')} alt="" /><b>等待付款</b></div>
//         <div className='time'>
//           <p>需付款：¥{props.location.state}.00 剩余时间：<span id="time" >
//             {time.hour}时{time.minute}分{time.second}秒
//             </span></p>
//         </div>
//       </div>
//       <div className='sure_order_main'>
//         <div className='sure_order_main_fonts'>
//           <p>使用权归属：ABCD省的口舌快递费就开始</p>    {/*此地方的数据如果调用接口直接赋值就可以 */}
//           <p>使用权时间：自购买一年内</p>
//         </div>
//         <div className='sure_order_main_btns'>
//           <button className='sure_order_main_btn_left' onClick={() => {
//             // alert('已准备好调用接口')
//           }}>取消支付</button>
//           <button className='sure_order_main_btn_right' onClick={() => {
//             // alert('已准备好调用接口')
//             const { query: { order_id } } = history.location
//             console.log('history:', history)
//             payOrder({order_id}).then(res => {
//               (wxJs as any).jsApiCall(res).then((result: any) => {
//                 console.log('result:', result) 
//               })
//             })
//           }}>去支付</button>
//         </div>
//       </div>
//     </div>
//   )
// }

// export default OrderConfirm
